<template>
  <div class=''>
    <el-form :model="skuForm" label-width="100px" size="small">
      <el-form-item label="SPU名称">{{ spuInfo.spuName }}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuForm.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" placeholder="价格(元)" v-model="skuForm.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" placeholder="重量(千克)" v-model="skuForm.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" :rows="3" type="textarea" v-model="skuForm.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form inline size="small">
          <el-form-item :label="attrInfo.attrName" v-for="attrInfo in attrInfoList" :key="attrInfo.id">
            <el-select v-model="attrInfo.attrIdValueId">
              <el-option :value="`${attrInfo.id}-${item.id}`" :label="item.valueName"
                v-for="item in attrInfo.attrValueList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline size="small">
          <el-form-item :label="skuSaleAttr.saleAttrName" v-for="skuSaleAttr in skuSaleAttrValueList"
            :key="skuSaleAttr.id">
            <el-select v-model="skuSaleAttr.skuSaleAttrIdSaleAttrValId">
              <el-option :value="`${skuSaleAttr.id}-${item.id}`" :label="item.saleAttrValueName"
                v-for="item in skuSaleAttr.spuSaleAttrValueList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table :data="spuImgList" border @selection-change="selectionHandler">
          <el-table-column type="selection" width="80" align="center"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="{ row, $index }">
              <img :src="row.imgUrl" style="width: 60px;height: 60px;">
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="imgName"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="{ row, $index }">
              <el-tag v-if="row.isDefault === '1'" type="success" size="small">默认</el-tag>
              <el-button v-else type="primary" size="small" @click="setDefault(row)">设为默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSkuHandler">保存</el-button>
        <el-button @click="cancelHandler">取消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import skuApi from '@/api/sku'
import spuApi from '@/api/spu';
import { mapState } from "vuex";
export default {
  name: 'SkuFrom',
  data() {
    return {
      value: '',
      attrInfoList: [],
      spuImgList: [],
      skuSaleAttrValueList: [],
      skuForm: {
        category3Id: this.spuInfo.category3Id,
        spuId: this.spuInfo.tmId,
        tmId: this.spuInfo.tmId,
        price: '',
        skuDesc: '',
        skuName: '',
        weight: '',
        createTime: '',
        skuDefaultImg: '',
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
      }
    }
  },
  props: ['spuInfo'],
  methods: {
    // 点击保存的回调
    async saveSkuHandler() {
      // 组装数据
      this.skuForm.skuDefaultImg = this.spuImgList.find(item => item.isDefault == '1')?.imgUrl;
      this.skuForm.skuAttrValueList = this.attrInfoList.filter(item => item.attrIdValueId).map(item => {
        const [attrId, valueId] = item.attrIdValueId?.split('-')
        return {
          attrId,
          valueId
        }
      })
      this.skuForm.skuSaleAttrValueList = this.skuSaleAttrValueList.filter(item => item.skuSaleAttrIdSaleAttrValId).map(item => {
        const [saleAttrId, saleAttrValueId] = item.skuSaleAttrIdSaleAttrValId?.split('-')
        return {
          saleAttrId,
          saleAttrValueId
        }
      })
      const { category3Id, spuId, tmId, price, skuDesc, skuName, weight, skuDefaultImg, skuImageList, skuAttrValueList, skuSaleAttrValueList } = this.skuForm
      if (!(category3Id && spuId && tmId && price && skuDesc && skuName && weight && skuDefaultImg && skuImageList && skuAttrValueList && skuSaleAttrValueList)) {
        this.$message.warning('请补全sku信息')
        return
      }

      // 发送请求
      try {
        await skuApi.saveSkuInfo(this.skuForm)
        this.$message.success('保存成功')
        this.cancelHandler()
      } catch (error) {
        console.error(error)
        this.$message.error('保存失败')
      }
    },
    // 表格选择项发生改变时的回调
    selectionHandler(params) {
      this.skuForm.skuImageList = params
    },
    // 点击设为默认的回调
    setDefault(row) {
      this.spuImgList.forEach(item => item.isDefault = '0')
      row.isDefault = '1'
    },
    // 获取销售属性数据的功能函数
    async getSpuSaleAttrListBySpuId() {
      try {
        let result = await spuApi.getSpuSaleAttrListBySpuId(this.spuInfo.id)
        this.skuSaleAttrValueList = result.data.map(item => {
          item.skuSaleAttrIdSaleAttrValId = ''
          return {
            ...item
          }
        })
      } catch (error) {
        console.error(error)
      }
    },
    // 获取图片列表数据的功能函数
    async getSpuImageListBySpuId() {
      try {
        let result = await spuApi.getSpuImageListBySpuId(this.spuInfo.id)
        this.spuImgList = result.data.map((item, index) => {
          if (index == 0) {
            item.isDefault = '1'
          } else {
            item.isDefault = '0'
          }
          return {
            ...item
          }
        })
      } catch (error) {
        console.error(error)
        this.$message.error('暂无图片数据，请重试')
      }
    },
    // 点击取消的回调
    cancelHandler() {
      this.$emit('changeStatus', 1)
      this.$emit('spuInfo')
    },
    // 获取商品平台属性的弄功能函数
    async getAttrInfoList() {
      try {
        let result = await skuApi.getAttrInfoList(this)
        this.attrInfoList = result.data.map(item => {
          item.attrIdValueId = ''
          return {
            ...item
          }
        })
      } catch (error) {
        console.error(error)
        this.$message.error('暂无平台属性，请重试')
      }
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id',])
  },
  mounted() {
    this.getAttrInfoList()
    this.getSpuImageListBySpuId()
    this.getSpuSaleAttrListBySpuId()
  }
}
</script>

<style></style>